<template>
	<view class="card">

		<view class="card-head" :style="[headStyle]">
			<slot name="head"></slot>
		</view>
		<view class="card-title">
			<slot name="title"></slot>
		</view>
		<view class="card-body" @click="$emit('onCard')">
			<view class="card-body-left">
				<slot name="bodyLeft"></slot>
			</view>
			<view span="1" class="card-body-right">
				<u-icon name="arrow-right" color="#98A5B3" size="28"></u-icon>
			</view>
		</view>
		<template v-if="$slots.footer">
			<view class="card-footer">
				<slot name="footer"></slot>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'CardWrapper',
		props: {
			headStyle: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		filters: {

		},

		data() {
			return {}
		},
		methods: {}

	}
</script>

<style lang="scss" scoped>
	.card {
		background-color: #fff;
		margin-top: 30rpx;
		box-shadow: 0 30rpx 18rpx -14rpx #E6EBF2;
		border-radius: 20rpx;
		overflow: hidden;

		&-head {
			height: 68rpx;
			line-height: 68rpx;
			border-bottom: 2rpx solid #F5F7FA;
			padding-left: 20rpx;
		}

		&-title {
			padding-left: 20rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #0F2E4D;
			margin: 30rpx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&-body {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			padding-left: 20rpx;

			&-left {
				width: 90%;
				flex-basis: 90%;
			}

			&-right {
				flex: 1;
				align-items: center;
				display: flex;
				justify-content: center;
				padding-bottom: 60rpx;
			}
		}

		&-footer {
			padding: 0 0 30rpx 0;
		}



	}
</style>
